import 'package:flutter/material.dart';

class MyApp20 extends StatelessWidget {
  MyApp20({super.key});

  List navMap = [
    {
      "imgUrl":
          "https://pic.rmb.bdstatic.com/bjh/250110/dump/0a387e68a27a957cbae3d5ae5071427a.jpeg",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {
          "path": "pages/category/index",
          "url": "pages/category/index",
        },
      },
      "text": "新品首发",
    },
    {
      "imgUrl":
          "https://wx2.sinaimg.cn/mw690/711c9a7bly1hxv2p6flmpj20nv1hcdno.jpg",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {
          "path": "pages/category/index",
          "url": "pages/category/index",
        },
      },
      "text": "新品首发",
    },
    {
      "imgUrl":
          "https://pic.rmb.bdstatic.com/bjh/3f19e4398b/240603/c94fa00d19777ef4581f40c77b302001.jpeg",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {
          "path": "pages/category/index",
          "url": "pages/category/index",
        },
      },
      "text": "新品首发",
    },
    {
      "imgUrl":
          "https://wx3.sinaimg.cn/mw690/8864d5a6gy1hwntmb55y6j20sg16o4qp.jpg",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {
          "path": "pages/category/index",
          "url": "pages/category/index",
        },
      },
      "text": "新品首发",
    },
    {
      "imgUrl":
          "https://pic.rmb.bdstatic.com/bjh/3f19e4398b/240912/d43409667ea0916d1aaf4f42682c62e1.jpeg",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {
          "path": "pages/category/index",
          "url": "pages/category/index",
        },
      },
      "text": "新品首发",
    },
    {
      "imgUrl":
          "https://pic.rmb.bdstatic.com/bjh/250110/dump/0a387e68a27a957cbae3d5ae5071427a.jpeg",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {
          "path": "pages/category/index",
          "url": "pages/category/index",
        },
      },
      "text": "新品首发",
    },
    {
      "imgUrl":
          "https://wx2.sinaimg.cn/mw690/711c9a7bly1hxv2p6flmpj20nv1hcdno.jpg",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {
          "path": "pages/category/index",
          "url": "pages/category/index",
        },
      },
      "text": "新品首发",
    },
    {
      "imgUrl":
          "https://pic.rmb.bdstatic.com/bjh/3f19e4398b/240603/c94fa00d19777ef4581f40c77b302001.jpeg",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {
          "path": "pages/category/index",
          "url": "pages/category/index",
        },
      },
      "text": "新品首发",
    },
    {
      "imgUrl":
          "https://wx3.sinaimg.cn/mw690/8864d5a6gy1hwntmb55y6j20sg16o4qp.jpg",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {
          "path": "pages/category/index",
          "url": "pages/category/index",
        },
      },
      "text": "新品首发",
    },
    {
      "imgUrl":
          "https://pic.rmb.bdstatic.com/bjh/3f19e4398b/240912/d43409667ea0916d1aaf4f42682c62e1.jpeg",
      "imgName": "icon-1.png",
      "link": {
        "id": "c37c2ee",
        "title": "分类页",
        "type": "PAGE",
        "param": {
          "path": "pages/category/index",
          "url": "pages/category/index",
        },
      },
      "text": "新品首发",
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //导航条
      appBar: AppBar(
        title: const Text(
          'CustomScrollView',
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
        backgroundColor: Colors.pink,
        centerTitle: true,
      ),
      //主体区域
      body: CustomScrollView(
        //
        slivers: [
          //
          SliverGrid.builder(
            //
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              //
              crossAxisCount: 5,
              mainAxisSpacing: 10,
              crossAxisSpacing: 10,
              childAspectRatio: 1,
            ),
            itemBuilder: (BuildContext context, int index) {
              return Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: const Color.fromARGB(255, 238, 237, 237),
                ),
                alignment: Alignment.center,
                child: Column(
                  children: [
                    Image.network(
                      navMap[index]['imgUrl'],
                      width: 40,
                      height: 40,
                    ),
                    const SizedBox(height: 5),
                    Expanded(child: Text('${navMap[index]['text']}')),
                  ],
                ),
              );
            },
            itemCount: 10,
          ),
          //3.上下两部分的间距
          const SliverPadding(padding: EdgeInsets.only(bottom: 5)),
          //4.列表
          SliverList.builder(
            //
            itemBuilder: (BuildContext context, int index) {
              return Container(
                padding: const EdgeInsets.only(bottom: 5),
                child: Container(
                  height: 120.0,
                  color: Colors.orange,
                  alignment: Alignment.centerLeft,
                  child: Text('传智教育 $index'),
                ),
              );
            },
            itemCount: 20,
          ),
        ],
      ),
    );
  }
}
